$(function () {
    var layer = layui.layer;
    /* 1--获取所有分类，渲染到下拉列表 */
    initCate();

    function initCate() {
        $.ajax({
            method: 'get',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message, {
                        icon: 5
                    })
                };
                // console.log(res);
                // 渲染到下拉列表
                var htmlStr = template('tpl-pub', res);
                // console.log(htmlStr);
                $("[name=cate_id]").html(htmlStr);
                // 重新渲染表单
                layui.form.render();
            }
        })
    };
    /* 2--初始化富文本 */
    initEditor();
    /* 3--初始化图片裁剪区 */
    //  初始化图片裁剪器
    var $image = $('#image')

    // 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 初始化裁剪区域
    $image.cropper(options);
    /* 4---单击（选择封面）按钮，弹出文件选择框 */
    $("#btnChooseImage").on('click', function () {
        $("#coverFile").click();
    })
    /* 5---当用户选择了图片文件，更换裁剪区域 */
    $("#coverFile").on("change", function () {
        var fileList = $(this)[0].files;
        if (fileList.length === 0) {
            return layer.msg('请选择文件', {
                icon: 5
            });
        };
        // 更换裁剪区域
        var file = fileList[0];
        var newImgURL = URL.createObjectURL(file)
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域    })
    });
    /* 6---准备文章的状态，更改文章的状态 */
    var state = '已发布'; //默认值‘已发布’
    $("#btnSave2").on('click', function () {
        state = '草稿'
    });
    /* 7---发布文章 */
    $('#form-pub').on('submit', function (e) {
        e.preventDefault();
        // 收集数据
        var fd = new FormData($(this)[0]);
        // 把文章状态追加到数据中去
        fd.append("state", state);
        // 裁剪图片，生成二进制文件
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
                //裁剪完成，调用此回调函数， 得到文件对象后，进行后续的操作
                // 将其追加到fd中去
                fd.append("cover_img", blob);
                // 遍历fd
                fd.forEach(item => {
                    console.log(item);
                });
                // 调用函数，发布文章
                publishArticle(fd);
            })
    });

    function publishArticle(fd) {
        $.ajax({
            method: 'post',
            url: '/my/article/add',
            data: fd,
            // 配置
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return lauer.msg('发表失败', {
                        icon: 5
                    })
                };
                layer.msg('发表成功', {
                    icon: 6
                }, function () {
                    // location.href = '/article/art_list.html';
                    // 触发父页面中“文章列表”的点击事件；
                    window.parent.document.querySelector('#articleList').click();
                })
            }
        })
    }
})